import VXETable from 'vxe-table'
// VXETable.interceptor.add('event.clearActived', (params, event) => {
// console.log('params, event',params, event)
// // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
// if (event.target.className.indexOf('other-popper') > -1) {
//   return false
// }
//   })
const getElComp = (column, row) => {
    let elComp = undefined;
    column.prop = column.property
    if (row.elComp && row.elComp[column.prop]) {
        elComp = row.elComp[column.prop];
    }
    if (!elComp && column.elComp) {
        elComp = column.elComp;
    }
    if (elComp === 'text') {
        return elComp;
    }
    if (!this.edit) {
        if (elComp && typeof elComp.formatter === 'function') {
            return {
                elType: 'text',
                formatter: elComp.formatter,
            };
        }
        return 'text';
    }
    if (elComp) {
        if (elComp.integer === undefined) {
            elComp.integer = false;
        }
        if (elComp.clearable === undefined) {
            elComp.clearable = true;
        }
        if (elComp.size === undefined) {
            elComp.size = 'mini'// 'small';
        }
        if (elComp.integer) {
            elComp.double = false;
        }
        if (elComp.double === undefined) {
            elComp.double = false;
        }
        if (elComp.type === 'textarea' && elComp.autosize === undefined) {
            elComp.autosize = {maxRows: 3};
        }
        if (!elComp.input) {
            elComp.input = onEvent;
        }
    }
    return elComp;
}

const filter = (column, row) => {
    return !column.filter || (typeof column.filter === 'function' && column.filter(row));
}

const filterDisabled = (column, row) => {
    let elComp = getElComp(column, row);
    if (elComp.disabled) {
        return true;
    }
    if (typeof elComp.filterDisabled === 'function') {
        return elComp.filterDisabled(row, column)
    }
    return false;
}

const onEvent = (row, column, scope) => {
    console.log("row, column, scope", row, column, scope)
}
// 创建一个简单输入框渲染
VXETable.renderer.add('MyInput', {
    autofocus: "input.el-input__inner",
    // 可编辑激活模板
    renderEdit(h, renderOpts, {row, column}) {
        const $this = this;
        column = Object.assign({}, column, column.params)
        console.log("row, column, scope", row, column, getElComp(column, row))
        return [
            // <el-input class="my-cell" text="text" v-model={ row[column.property] } />
            <el-input
                v-model={row[column.property]} v-int={getElComp(column, row).integer}
                v-double={getElComp(column, row).double}
                min={getElComp(column, row).min} type={getElComp(column, row).type}
                clearable={getElComp(column, row).clearable}
                disabled={filterDisabled(column, row)}
                size={getElComp(column, row).size}
                autosize={getElComp(column, row).autosize}
                onchange={onEvent(row, column, 'change')}
                oninput={onEvent(row, column, 'input')}
                onblur={onEvent(row, column, 'blur')}/>
            //   onchange={getElComp(column, row).change && getElComp(column, row).change(row, column, 'change')}
            //   oninput={getElComp(column, row).input && getElComp(column, row).input(row, column, 'input')}
            //   onblur={getElComp(column, row).blur && getElComp(column, row).blur(row, column, 'blur')}/>
            // h('el-input',{
            //     props:{
            //         value:row[column.property],
            //         min:getElComp(column, row).min,
            //         type:getElComp(column, row).type,
            //         clearable:getElComp(column, row).clearable,
            //         disabled:filterDisabled(column, row),
            //         size:getElComp(column, row).size,
            //         autosize:getElComp(column, row).autosize,
            //     } ,
            //     on:{
            //         input (value) {
            //             $this.$set(row,column.property,value)
            // console.log(row,column,renderOpts, value,getElComp(column, row),$this );

            //             // row[column.property] = value
            //             getElComp(column, row).input && getElComp(column, row).input(row, column, scope)
            //         },
            //         change(e){getElComp(column, row).change && getElComp(column, row).change(row, column, scope)},
            //         blur(e){getElComp(column, row).blur && getElComp(column, row).blur(row, column, scope)},
            //     },
            //     directives: [ {name:'int',value:getElComp(column, row).integer},{name:'double',value:getElComp(column, row).double},]
            // })
        ]
    },
    // 可编辑显示模板
    renderCell(h, renderOpts, {row, column}) {
        return [
            <span>{row[column.property]}</span>
        ]
    },
    // 导出模板，例如导出插槽中自定义的内容
    exportMethod(params) {
        const {row, column} = params
        return '自定义内容'
    }
})
